<template>
	<div class="avatar" v-if="show">
		<div class="bg" @click='show = false'></div>
		<div class="content">
			<div class="item">
				<span>拍照</span>
				<input type="file" accept="image/gif, image/jpeg, image/png, image/jpg" capture="camera" class="avatarStyle" @change='update($event)'>
			</div>
			<div class="item">
				<span>从相册选择</span>
				<input type="file" accept="image/gif, image/jpeg, image/png, image/jpg" multiple class="avatarStyle" @change='update($event)'>
			</div>
			<div class="cell item" @click='show = false'>取消</div>
		</div>
		<loading :show="loadingShow" text="正在上传"></loading>

	</div>
</template>

<script>
import { updateAvatar } from '../../../../config/getData'
import Loading from 'vux/src/components/loading/'

export default {
	data() {
		return {
			show: false,
			loadingShow: false,
		};
	},
	props: ["value"],
	watch: {
		show(val) {
			this.$emit('input',val)
		},
		value: {
			handler: function(val) {
			this.show = val;
			},
			immediate: true
		}
	},
	methods:{
		update (e) {
			var files = e.target.files,
				file;

			if(files && files.length > 0){
				file = files[0];

				if (file.size > 1024 * 1024 * 2) {
					this.$vux.toast.show({
						text: '图片大小不能超过 2MB!',
						width:'auto',
					})
					return false;
				}

				var URL = window.URL || window.webkitURL;
				var imgURL = URL.createObjectURL(file);

				this.$emit('updata', imgURL)
			}
		}
	},
	components:{
		Loading
	},
	mounted() {
		this.show = this.value;
	}
};
</script>


<style lang="scss" scoped>
@import '../../../../assets/css/all';

.avatarStyle{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0}
.avatar {@include screen;background-color:transparent;z-index:10;
	.bg{@include screen;background-color:rgba(0,0,0,.5);}
	.item{background-color: white;line-height: 60px;text-align: center;font-size:16px;position: relative;}
	.item + .item{border-top:1px solid #f0f0f0;}
	.cell{margin-top:10px;}
	.content{background-color: #f5f5f5;position: absolute;width:100%;left:0;bottom:0;z-index:11;}

}

</style>
